<template>
  <!-- 待办 -->
  <div class="toDo-list">
    <div class="toDo-list-title blueTitleStyle">待办</div>
    <div class="toDo-list-content">
      <div class="btn-group endbox">
        <el-button class="centerbox" type="primary" @click="handleAuth">授权</el-button>
        <el-button type="primary centerbox" @click="handleCancel">取消授权</el-button>
      </div>
      <div class="table-group bigTableStyle">
        <el-table
        border
          :data="tableData"
          :row-class-name="tableRowClassName"
          @current-change="handleSelectionChange"
          highlight-current-row
          style="width: 100%"
          height="100%"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
        >
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="stationName" label="变电站" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="areaName" label="区域房间" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="accessName" label="门禁" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="keyCode" label="钥匙编号" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column
            prop="authstartTime"
            label="授权开始时间"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="authendTime"
            label="授权结束时间"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="authPerson" label="授权人" width="120" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column
            prop="bauthPerson"
            label="被授权人"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="sendstation"
            label="是否同时派发多站"
            width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <!-- <el-table-column prop="relevance" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="primary">{{scope.row.relevance}}</el-button>
            </template>
          </el-table-column>-->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
@Component
export default class ToDoList extends Vue {
  //   表格
  tableData: Array<object> = [];
  loading: boolean = true;
  tableSelect: Array<object> = [];

  mounted() {
    this.fetch();
  }

  fetch() {
    // console.log(111111);

    (this as any).$services
      .getAuthDoneList({ data: {} })
      .then((res: any) => {
        // console.log(res.data);
        if (res.data) {
          this.tableData = res.data;
          this.loading = false;
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }

  // 授权-增加记录授权接口
  handleAuth() {
    if (this.tableSelect.length !== 1) {
      this.$message({
        message: "请选择一行数据",
        type: "warning",
      });
    } else {
      // console.log(this.tableSelect);

      var params = {
        accessId: "",
        accessName: "",
        areaId: "",
        areaName: "",
        authPerson: "",
        authendTime: "",
        authstartTime: "",
        bauthPerson: "",
        keyCode: "",
        returnTime: "",
        stationId: "",
        stationName: "",
      };
      (this as any).$services
        .doneAuthorized({ data: params, method: "post" })
        .then((res: any) => {
          // console.log(res.data);
          if (res.data) {
            this.$emit("handleAddauth");
          }else{
            this.$message({
              message: "授权失败",
              type: "warning",
            });
          }
        })
        .catch((err: object) => {
          console.log(err);
          this.$message({
              message: "授权失败",
              type: "warning",
            });
        });
    }
  }
  // 取消授权
  handleCancel() {
    if (this.tableSelect.length !== 1) {
      this.$message({
        message: "请选择一行数据",
        type: "warning",
      });
    } else {
      // console.log(this.tableSelect);
      var params = {
        id: "",
      };
      (this as any).$services
        .deleteByIdAuth({ data: params, method: "delete" })
        .then((res: any) => {
          // console.log(res.data);
          if (res.data) {
            this.$emit("handleAddauth");
          } else {
            this.$message({
              message: "取消失败",
              type: "warning",
            });
          }
        })
        .catch((err: object) => {
          console.log(err);
          this.$message({
              message: "取消失败",
              type: "warning",
            });
        });
    }
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  handleSelectionChange(val: any): void {
    console.log(val);
    this.tableSelect = [];
    this.tableSelect.push(val);
  }
}
</script>

<style lang="scss" scoped>
.toDo-list {
  width: 100%;
  height: 100%;
  position: relative;
  &-title {
    width: 100%;
    height: 0.26rem;
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.26rem);
    .btn-group {
      width: 100%;
      height: 0.26rem;
      position: absolute;
      top: 0;
      left: 0;
    }
    .table-group {
      width: 100%;
      height: 100%;
      padding: 0.1rem;
      box-sizing: border-box;
      overflow: auto;
    }
  }
}
</style>
<style lang="scss">
.toDo-list {
  .el-button--primary {
    height: 0.26rem;
  }
  .el-button {
    padding: 0 0.15rem;
  }
}
</style>